import React, { useEffect, useState } from 'react';
import { Table, Input } from 'antd';
import { Link } from 'umi';
import { ISkillListQuery, interviewList, ProjectList, DefenceList, Query } from '@/utils/interface';
import { getproManagement, ProjectLists } from '@/services';
import classNames from 'classnames';
import { SearchOutlined, EyeOutlined, FormOutlined, RollbackOutlined, DeliveredProcedureOutlined, DeleteOutlined } from '@ant-design/icons';
// 直接引入样式
// import './postSkill.less'
// 启用了css module
import styles from './proManagement.less'
import { observer } from 'mobx-react-lite'
import useStore from '@/context/useStore';

const types = ['全部', '生产实训', '教学实训', '专业群实训']
const status = ['全部', '草稿', '已发布', '待审核', '已驳回'];
const typess = ['专业群实训', '生产实训', '教学实训',]


const columns = [
    {
        title: '项目名称',
        align: 'center',
        dataIndex: "proname"
    },
    {
        title: '版本',
        dataIndex: 'versionNum',
        align: 'center'

    },
    {
        title: '任务数量',
        dataIndex: 'taskCount',
        align: 'center'

    },
    {
        title: '所属专业',
        dataIndex: 'trade',
        align: 'center'

    },
    {
        title: '所属行业',
        dataIndex: 'major',
        align: 'center' 

    },
    {
        title: '实训类型',
        render: (row: ProjectList) => <span className={styles[`typess${row.sxtype}`]}>{typess[Number(row.sxtype)]}</span>,
        align: 'center'

    }, {
        title: '推荐完成天数',
        align: 'center',
        dataIndex: 'subjecttime',

    },
    {
        title: '更新时间',
        align: 'center',
        dataIndex: 'createTime',
    },
    {
        title: '演示',
        render: (row: ProjectList) => <Link to={'/teachers/addProject?see=false'}>
            查看
    </Link>,
        align: 'center'

    },
    {
        title: '状态',
        render: (row: ProjectList) => <span 
        className={styles[`stutus${row.status}`]}>
            {status[Number(row.status)]}</span>,
        align: 'center'

    },
    {
        align: 'center',
        title: '操作',
        render: (row: ProjectList) => {
            if (row.status === '3') {
                return <div className={styles.action}>
                    <EyeOutlined style={{ color: '#679cf6' }} />
                    <RollbackOutlined style={{ color: '#679cf6' }} />
                </div>
            } else if (row.status === '1') {
                return <div className={styles.action}>
                    <FormOutlined style={{ color: '#679cf6' }} />
                    <DeliveredProcedureOutlined style={{ color: '#679cf6' }} />
                    <DeleteOutlined style={{ color: '#679cf6' }} />
                </div>
            }
        }
    }
];
const ProManagement: React.FC = props => {
    let [curSkill, setCurSkill] = useState('');
    let [isMyInfo, setMyInfo] = useState(false);
    let [curStatus, setCurStatus] = useState(0);
    let [curStatus2, setCurStatus2] = useState(0);
    let [curStatus3, setCurStatus3] = useState(0);
    let [curStatus4, setCurStatus4] = useState(0);


    let [title, setTitle] = useState('');
    let [searchTitle, setSearchTitle] = useState('');
    let [value, setvalue] = useState('');
    let [values, setvalues] = useState('');
    let [top, settop] = useState('')
    let [deep, setdeep] = useState('')

    let query: Query = {
        isAsc: 'desc',
        pageNum: 1,
        pageSize: 10,
        sxtype: 0,
        status: 0,
        proName: '',
        newProjectList: 0,
        specialtyTag: ''
    }

    let queryParams: ISkillListQuery = { isAsc: 'desc', searchTitle: '', pageNum: 1, pageSize: 10, isMyInfo: false };
    let { proManagement, getProjectList, getLabelList } = useStore();

    // 发起请求获取专业标签
    useEffect(() => {
        proManagement.proManagement();
        getLabelList.LabelList()
        // getProjectList.ProjectList()
    }, [])

    useEffect(() => {
        let querys: Query = query;
        if (value) {
            querys = { ...querys, specialtyTag: value }
        }
        if (values) {
            querys = { ...querys, specialtyTag: value, industryTag: values }
        }
        if (top) {
            querys = { ...querys, specialtyTag: value, industryTag: values, sxtype: Number(top) }
        }
        if (deep) {
            querys = { ...querys, specialtyTag: value, industryTag: values, status: Number(deep) }
        }
        getProjectList.ProjectList(querys)
    }, [value, values, top, deep])

    // 发起请求获取项目列表
    useEffect(() => {
    }, [curSkill, curStatus, isMyInfo, searchTitle]);

    function selectMajorStationList(value: string) {
    }


    // 我的页面:孔大语
    return <div className={styles.postskill}>
        <section className={styles.post}>
            {/* 实训类型 */}
            <section className={styles.state}>
                <h2>面试结果：</h2>
                <ul>
                    {
                        types.map((item, index) => {
                            return <span className={index === curStatus ? classNames(styles.active) : ''} key={item} onClick={() => {
                                setCurStatus(index)
                                settop(String(index))
                            }
                            }>{item}</span>
                        })
                    }
                </ul>
                {/*  */}
            </section>
            {/* 专业、 */}
            <section className={styles.major}>
                <h2>专业：</h2>
                <ul className={styles.statusList}>{

                    [{ id: "", label: "全部", value: "" }, ...proManagement.getproManagement].map((item, index) => {
                        return <span key={index} className={index === curStatus2 ? classNames(styles.actives) : ''} onClick={() => {
                            setCurStatus2(index)
                            setvalue(item.value)
                        }}
                        >{item.label}</span>
                    })
                }</ul>
            </section>
            {/* 行业 */}
            <section className={styles.work}>
                <h2>行业：</h2>
                <ul className={styles.statusList}>{
                    [{ id: "", label: "全部", value: "" }, ...getLabelList.getLabellist].map((item, index) => {
                        return <span className={index === curStatus3 ? classNames(styles.span, styles.active) : styles.span} key={item.value} onClick={
                            () => {
                                setCurStatus3(index)
                                setvalues(item.value)
                            }}

                        >{item.label}</span>
                    })
                }</ul>
                {/* types */}
            </section>

            <section className={styles.status}>
                <h2>状态：</h2>
                <ul>
                    {
                        status.map((item, index) => {
                            return <span key={item} className={index === curStatus4 ? classNames(styles.active) : ''} onClick={
                                () => {
                                    setCurStatus4(index)
                                    setdeep(String(index))

                                }}>{item}</span>
                        })
                    }
                </ul>
                {/*  */}
            </section>
       
        </section>



        <div className={styles.table}>
            {/* 模糊搜索 */}
            <div className={styles.search}>
                <div className={styles.s1}>
                    <input type="checkbox" checked={isMyInfo} onChange={e => setMyInfo(e.target.checked)} style={{ marginLeft: "-25px" }} /><span>仅看最新版</span>
                </div>
                <Input style={{ width: '210px', height: '35px' }} className={styles.input} placeholder="搜索项目" suffix={<SearchOutlined onClick={() => setSearchTitle(title)} />} value={title} onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                    if (e.keyCode === 13) {
                        setSearchTitle(title)
                    }
                }} />
                <Link to="/teachers/addProject?see=false">
                    <button className={styles.input_button}>+添加项目</button>
                </Link>
            </div>


            <Table className={styles.table} rowKey='versionId' dataSource={getProjectList.getProjectList} columns={columns as any} />
        </div>
    </div>
}
export default observer(ProManagement)

